﻿@model Yunwei.Web.Models.HomeViewModel
@{
    ViewBag.Title = "云味网(国内最大的互联网智能餐厅)";
}


<div class="d-scroll-top-box hidden-print hidden-xs hidden-sm affix-top" style="display: none" aria-hidden="true"><span class="glyphicon glyphicon-arrow-up d-scroll-top-button"></span></div>
<div class="d-banner hidden-xs hidden-sm" style="color: rgb(0, 0, 0); height: 339.2px; background-image: url(../images/banner-noon-001.jpg);"></div>
<div class="container main">
    <div class="hidden-xs hidden-sm">
        <ul class="nav nav-pills heifai-tab" id="heifai-tab">
            <li class="active">
                <a href="#heifai-kitchen"><img active-src="../images/heifai-kitchen-active.png" normal-src="../images/heifai-kitchen-s.png" src="../images/heifai-kitchen-active.png"></a> <span>厨师荟萃</span>
            </li>
            <li>
                <a href="#restaurants"><img active-src="../images/restaurants-active.png" normal-src="../images/restaurants-s.png" src="../images/restaurants-s.png"></a> <span>品牌餐厅</span>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="heifai-kitchen">
            <div class="row masonry-list">
                <!-- ngRepeat: restaurant in kitchens -->
                @foreach(var chef in Model.Staffs){
                <div class="col-xs-12 col-sm-6 col-md-3 mode masonry-item">
                    <div>
                        <a href="Chef/Detail/@chef.Id" class="thumbnail dish-border"><img src="@chef.Avatar" alt="@chef.Name"/></a>
                        <div class="caption">
                            <p class="text-left name">@chef.Name</p>
                            <p class="text-left desc">
                                @chef.Brief
                            </p>
                        </div>
                    </div>
                </div>
                }
                <!-- end ngRepeat: restaurant in kitchens -->
            </div>
        </div>
        <div class="tab-pane" id="restaurants">
            <div class="row masonry-list">
                <!-- ngRepeat: restaurant in restaurants -->
                @foreach(var res in Model.Restaurants)
                { 
                <div class="col-xs-12 col-sm-6 col-md-3 mode masonry-item">
                    <div>
                        <a href="/Restaurant/Detail/@res.Id" class="thumbnail dish-border"><img src="@res.Avatar" alt="@res.Name"/></a>
                        <div class="caption">
                            <p class="text-left name">@res.Name</p>
                            <p class="text-left desc">
                                @res.Brief
                            </p>
                        </div>
                    </div>
                </div>
                }
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#heifai-tab li").click(function () {
        if ($(this).hasClass("active")) return;

        $(this).siblings().removeClass("active");
        var sbimg = $(this).siblings().find("img");
        sbimg.attr("src", sbimg.attr("normal-src"));


        $(this).addClass("active");
        var img = $(this).find("img");
        img.attr("src", img.attr("active-src"));

        $(".tab-content .tab-pane").removeClass("active");

        $($(this).find("a").attr("href")).addClass("active");
    });
</script>